<!-- description:  -->
<!-- fileName: index.vue -->
<!-- author: iwen(1044803551@qq.com) -->

<script setup name=''>
//引入方法
import { reactive, toRefs, ref } from 'vue'
import { useRouter } from "vue-router";
const router = useRouter();

/**
 * 分页
 */
// 当前页
const page = ref(1)
// 每页的数据量
const limit = ref(10)
// 数据总条数
const total = ref(100)
//变量声明
// const state = reactive({})
// const {  } = toRefs(state)

//
</script>

<template>
    <div class="page-container">
        <section class="card" v-for="(item, i) in 8" :key="i">
            <img class="card-img" src="https://s1.baoshuo.ren/2024/01/01/yn2YITKUO5kqubj.jpg" alt="">
            <div class="article">
                <nuxt-link to="/pina" class="title" title="标题标题标题标题标题">
                    我的 2023 年度总结 —— 愿此去前路皆坦途愿此去前路皆坦途愿此去前路皆坦途愿此去前路皆坦途愿此去前路皆坦途愿此去前路皆坦途
                </nuxt-link>
                <div class="desc">
                    在某些情况下，我们会遇到需要将网页打印出来的需求。但是，直接打印网页的效果往往不尽如人意，因为网页的排版和打印的排版是不同的。本文将介绍如何创建一个在打印时具有出色的质量和可读性的网页。
                </div>
                <p class="date">
                    <time>2024-02-01</time>
                    <span class="round">.</span>
                    <span class="author">iwen</span>
                </p>
            </div>
        </section>
        <n-pagination v-model:page="page" :item-count="201"/>
    </div>
</template>

<style lang='scss' scoped>
.card {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background: #f8f9fa;
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 10px;
    border-radius: 6px;

    .card-img {
        width: 240px;
        height: 160px;
        margin-left: 30px;
        border-radius: 4px;
    }

    .article {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;

        .title {
            font-size: 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 650px;
            line-height: 30px;
            text-decoration: none;
            color: rgba(0, 0, 0, 0.9);
        }

        .desc {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.6);
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 4; // 自定义行数
            -webkit-box-orient: vertical;
        }

        .date {
            font-size: 12px;

            time {
                color: rgba(0, 0, 0, 0.8);
            }

            .round {
                color: rgba(0, 0, 0, 0.6);
                font-size: 30px;
                margin: 0 10px;
            }

            .author {
                color: rgba(0, 0, 0, 0.6);
            }
        }
    }

}
</style>